import React, { useState } from 'react';
import { Form, Input, Modal, Radio, TreeSelect, Select } from 'antd';


const { TextArea } = Input;

const FormItem = Form.Item;

export interface CreateFormProps {
  treeData?: API.TreeNodeItem[];
  levelList: API.DictItem[];
  typeList: API.DictItem[];
  modalVisible: boolean;
  jobId: number | undefined;
  onSubmit: (values:API.DepartmentItem) => void;
  onCancel: () => void;
}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const [formVals] = useState<API.PatrolJobItem>({
    areaId: undefined,
    position: '',
    content: '',
    importantLevel: undefined,
    patroItemlType: undefined,
    useState: 1
  });

  const [form] = Form.useForm();

  const { modalVisible, onSubmit: handleAdd, onCancel, treeData, levelList, typeList, jobId } = props;

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    fieldsValue.areaId = Number(fieldsValue.areaId);
    fieldsValue.jobId = jobId;
    form.resetFields();
    handleAdd(fieldsValue);
  };

  const onChange = (value:string, label:any[]) => {
    console.log(label);
  };

  const { Option } = Select;

  const getOption = (list:API.DictItem[]) => {
    if (!list || list.length < 1) {
      return (
        <Option key={''} value={''}>
          没有找到选项
        </Option>
      );
    }
    return list.map((item) => (
      <Option key={item.dictCode} value={item.dictCode??''}>
        {item.dictValue}
      </Option>
    ));
  };

  return (
    <Modal
      width={640}
      destroyOnClose
      title="新增任务"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Form
        {...formLayout}
        form={form}
        initialValues={{
          areaId: formVals.areaId,
          position: formVals.position,
          content: formVals.content,
          importantLevel: formVals.importantLevel,
          patroItemlType: formVals.patroItemlType,
          useState: formVals.useState
        }}
      >
        <FormItem
          label="巡检区域"
          name="areaId"
          rules={[{ required: true, message: '请输入巡检区域！' }]}
        >
          <TreeSelect
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={treeData}
            onChange={onChange}
            placeholder="请选择巡检区域"
            key="key"
            treeDefaultExpandAll
          />
        </FormItem>
        <FormItem
          label="巡检位置"
          name="position"
          rules={[{ required: true, message: '请输入巡检位置！' }]}
        >
          <TextArea  placeholder="请输入巡检位置" showCount maxLength={100}  />
        </FormItem>
        <FormItem
          label="巡检内容"
          name="content"
          rules={[{ required: true, message: '请输入巡检内容！' }]}
        >
          <TextArea  placeholder="请输入巡检内容" showCount maxLength={100}  />
        </FormItem>
        <FormItem
          label="重要性"
          name="importantLevel"
          rules={[{ required: true, message: '请选择重要性！' }]}
        >
          <Select placeholder="请选择重要性">
            {getOption(levelList)}
          </Select>
        </FormItem>
        <FormItem
          label="类别"
          name="patroItemlType"
          rules={[{ required: true, message: '请选择类别！' }]}
        >
          <Select placeholder="请选择类别">
            {getOption(typeList)}
          </Select>
        </FormItem>
        <FormItem
          label="启用状态"
          name="useState"
        >
          <Radio.Group>
            <Radio value={1} >
              启用
            </Radio>
            <Radio value={0}>
              禁用
            </Radio>
          </Radio.Group>
        </FormItem>
      </Form>
    </Modal>
  );
};

export default CreateForm;
